<template>
	<view class="zai-box">
		<image src="../../../static/zaizai-login/login.png" mode='aspectFit' class="zai-logo"></image>
		<view class="zai-title">用户登录</view>
		<view class="zai-form" >
		  <form @submit="formSubmit">
			<input class="zai-input" placeholder="请输入用户名"  name='username' v-model="info.username" @blur='checkusername'/>
			<view class="zai-input seeshow">
				<input  placeholder="请输入密码" :password="seePassword" name="password"
					v-model="info.password"   @blur="checkpassword" />
				<u-icon :name='name'  size="20"  @click="againPassword"></u-icon>
			</view>
			<navigator class="zai-label" url="../foundpass/foundpass">忘记密码？</navigator>
			<button class="zai-btn" form-type="submit">立即登录</button>
			<navigator url="../register/register" hover-class="none" class="zai-label">还没有账号？点此注册</navigator>
		  </form>
		</view>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {reg} from '../../../untils/vaildate.js';
import {gotologin} from '../../../api/useraApi.js';
import {usertoken} from '@/mock/home.js'


	const info =ref({
		username:'',
		password:''
	})
	const name=ref('eye')       //one密码显示
	const seePassword = ref(true) //再次输入密码
	
	//点击眼睛查看密码
	const againPassword = () => {
		seePassword.value = !seePassword.value;
		name.value=(seePassword.value==true)?'eye':'eye-fill'
	}
	
	//密码失去焦点触发验证
	const checkpassword=(e)=>{
		//先判断密码不能为空 在做正则校验 不通过则报密码错误  和确认密码做核对是否一致
		if(e.detail.value=='' || e.detail.value==null){
			 uni.showToast({
				title: '密码不能为空',
				icon: "error",
				duration: 1000
			 });
		}else if(!reg.pwd.test(e.detail.value)) {
					
			 uni.showToast({
				title: '6-16位数字加字母密码',
				icon: "error",
				duration: 1000
			 });
		}
	}
	
	//失去焦点核实用户名
	const checkusername=(e)=>{

		if(e.detail.value=='' || e.detail.value==null){
			 uni.showToast({
				title: '用户名不能为空',
				icon: "error",
				duration: 1000
			 });
		}else if(!reg.account.test(e.detail.value)) {
					
			 uni.showToast({
				title: '用户名必须是字母数字混合',
				icon: "error",
				duration: 1000
			 });
		}
		
	}

	const formSubmit=async(e)=>{
		let formdata = e.detail.value
		
		//输入的内容不能为空
		if (!formdata.username || !formdata.password ) {
			uni.showToast({
				title: '内容不能为空',
				icon: "error",
				duration: 1000
			});
		}else{
			let res = await gotologin({
				data:{
				username:formdata.username,
				password:formdata.password
				}
			})
			
			if(res.code==200){
			
				uni.setStorageSync('token',res.token)
				uni.switchTab({
					url:'/pages/user/user'
				})
			}else {
				uni.setStorageSync('token',usertoken().token)
				uni.switchTab({
					url:'/pages/user/user'
				})
			}
			
		}
	}
	
</script>
<style>
	.zai-box{
		padding: 0 100upx;
		position: relative;
	}
    .seeshow{
		display: flex;
		justify-content: space-between;
	}
	.zai-logo{
		width: 100%;
		width: 100%;
		height: 310upx;
	}
	.zai-title{
		position: absolute;
		top: 0;
		line-height: 360upx;
		font-size: 68upx;
		color: #fff;
		text-align: center;
		width: 100%;
		margin-left: -100upx;
	}
	.zai-form{
		margin-top: 120upx;
	}
	.zai-input{
		background: #e2f5fc;
		margin-top: 30upx;
		border-radius: 100upx;
		padding: 20upx 40upx;
		font-size: 16px;
	}
	.input-placeholder, .zai-input{
		color: #94afce;
	}
	.zai-label{
		padding: 60upx 0;
		text-align: center;
		font-size: 16px;
		color: #a7b6d0;
	}
	.zai-btn{
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}
	.zai-btn:after{
		border: 0;
	}
	/*按钮点击效果*/
	.zai-btn.button-hover{
		transform: translate(1upx, 1upx);
	}
	
	
</style>
